<template>
  <div class="content-wrapper">
    <div class="content-container">
      <el-form :inline="true" :model="listQuery" class="filter-container">
        <el-form-item label="状态">
          <el-select
            v-model="listQuery.status"
            size="mini"
            style="width: 120px"
          >
            <el-option
              v-for="item in statusOptions"
              :key="item.key"
              :label="item.value"
              :value="item.key"
            />
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="审核状态">
          <el-select
            v-model="listQuery.auditStatus"
            size="mini"
            style="width: 120px"
          >
            <el-option
              v-for="item in auditStatusOptions"
              :key="item.key"
              :label="item.value"
              :value="item.key"
            />
          </el-select>
        </el-form-item> -->
        <el-form-item label="项目货号">
          <el-input v-model="listQuery.goodsCode" type="text" size="mini" />
        </el-form-item>
        <el-form-item label="项目简称">
          <el-input v-model="listQuery.goodsAbbr" type="text" size="mini" />
        </el-form-item>
        <el-form-item>
          <el-button
            class="filter-item"
            size="small"
            round
            type="primary"
            icon="el-icon-search"
            @click="getTechniqueDataList"
          >
            搜索
          </el-button>
          <el-button
            class="filter-item"
            size="small"
            round
            icon="el-icon-plus"
            @click="openCreateDialog()"
          >
            新增
          </el-button>
        </el-form-item>
      </el-form>
      <el-table
        v-loading="listLoading"
        :data="techniqueDataList"
        highlight-current-row
      >
        <el-table-column label="状态" prop="status" width="100px">
          <template slot-scope="{ row }">
            <el-tag :type="isTagType(row.status)">
              {{ formatByKeyValue(statusOptions, row.status) }}
            </el-tag>
          </template>
        </el-table-column>
        <!-- <el-table-column label="审核状态" prop="auditStatus" width="100px">
          <template slot-scope="{ row }">
            <el-tag :type="isTagType(row.status)">
              {{ formatByKeyValue(statusOptions, row.status) }}
            </el-tag>
          </template>
        </el-table-column> -->
        <el-table-column label="项目货号" prop="goodsCode" width="150px" />
        <el-table-column label="项目简称" prop="goodsAbbr" width="150px" />
        <el-table-column label="文档明细" width="80" align="right">
          <template slot-scope="{ row }">
            <span v-if="row.techniqueDocumentList">{{
              row.techniqueDocumentList.length
            }}</span>
          </template>
        </el-table-column>
        <el-table-column type="expand" width="20">
          <template slot-scope="{ row }">
            <el-table
              :data="row.techniqueDocumentList"
              highlight-current-row
              default-expand-all
              border
            >
              <el-table-column property="productDictValue" label="文档名称">
                <template slot-scope="{ row }">
                  <el-tag style="cursor: pointer" @click="openDocument(row)">{{
                    row.documentName
                  }}</el-tag>
                </template>
              </el-table-column>
            </el-table>
            <!-- <div v-if="row.techniqueDocumentList">
              <el-tag
                v-for="(item, index) in row.techniqueDocumentList"
                :key="item.index"
                style="cursor: pointer"
                @click="openDocument(item)"
                >{{ item.documentName }}</el-tag
              >
            </div> -->
          </template>
        </el-table-column>
        <el-table-column label="备注" prop="memo" min-width="200px" />
        <el-table-column label="创建人" prop="createUserName" width="100px" />
        <el-table-column label="创建时间" prop="auditTime" width="160px" />
        <el-table-column label="更新人" prop="updateUserName" width="100px" />
        <el-table-column label="更新时间" prop="updateTime" width="160px" />
        <el-table-column
          label="审核意见"
          prop="auditContent"
          min-width="100px"
        />
        <el-table-column label="审核人" prop="auditUserName" width="100px" />
        <el-table-column label="审核时间" prop="auditTime" width="160px" />
        <el-table-column label="操作" align="center" width="80px" fixed="right">
          <template slot-scope="{ row }">
            <el-dropdown trigger="click" class="filter-item">
              <el-button type="text" class="el-icon-more" />
              <el-dropdown-menu slot="dropdown" class="user-dropdown">                 <el-dropdown-item
                                                                                         v-if="row.status === 1"
                                                                                         @click.native="setStatus(row, 2)"
                                                                                       >
                                                                                         停用
                                                                                       </el-dropdown-item>
                <el-dropdown-item
                  v-if="row.status !== 1"
                  @click.native="setStatus(row, 1)"
                >启用
                </el-dropdown-item>
                <el-dropdown-item
                  @click.native="openEditDialog(row)"
                >编辑</el-dropdown-item>
                <el-dropdown-item
                  @click.native="copyTechnique(row)"
                >复制</el-dropdown-item>

                <!-- <el-dropdown-item @click.native="openAuditDialog(row)"
                  >提交审核</el-dropdown-item
                > -->
                <el-dropdown-item
                  @click.native="deleteTechnique(row)"
                >删除</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <Pagination
      v-show="total > 0"
      :total="total"
      :page-number.sync="listQuery.pageNumber"
      :page-size.sync="listQuery.pageSize"
      @pagination="getTechniqueDataList"
    />
    <SaveTechnique
      :visible.sync="dialogVisible"
      :dialog-status="dialogStatus"
      :current-row="currentRow"
      :scope="scope"
      @saveData="handleSaveData"
    />

    <AuditDialog
      :visible.sync="auditDialogVisible"
      dialog-status="technique"
      :current-row="currentRow"
      @updateData="getTechniqueDataList"
    />
  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
import {
  deleteTechnique,
  updateTechnique,
  pageTechnique,
  copyTechnique,
  techniqueListPreOptions
} from '@/api/xd/technique.js'
import './components/saveTechnique'
import { openDocument } from '@/utils/openCommon.js'
import AuditDialog from '@/views/manufacture/components/auditDialog'
import SaveTechnique from './components/saveTechnique.vue'
import { formatByKeyValue, isTagType } from '@/utils'
import { fromBase64X } from '@/utils/string-util'

export default {
  components: { SaveTechnique, Pagination, AuditDialog },
  data() {
    return {
      scope: fromBase64X(this.$route.params.scope, 1),
      techniqueDataList: [],
      listQuery: {
        pageNumber: 1,
        pageIndex: 0,
        pageSize: 10,
        withDocument: true,
        scope: fromBase64X(this.$route.params.scope, 1)
      },
      total: 0,
      listLoading: false,
      list: [],
      ProductData: {},
      dialogVisible: false,
      productValue: '',
      temp: {},
      type: '',
      status: '',
      techniqueId: '',
      rules: {},
      titleMap: {
        create: '新增',
        update: '修改'
      },
      documentList: null,
      selectFolderData: {
        title: '选择'
      },
      statusOptions: [],
      auditStatusOptions: [],
      dialogStatus: null,
      currentRow: null,
      auditDialogVisible: false
    }
  },
  watch: {
    ProductValue(val, res) {
      console.log(val, res, 'kk')
    }
  },
  async mounted() {
    const { data } = await techniqueListPreOptions()
    this.statusOptions = data.status
    this.auditStatusOptions = data.auditStatus

    this.getTechniqueDataList()
  },
  methods: {
    isTagType,
    formatByKeyValue,
    getTechniqueDataList() {
      this.listQuery.pageIndex = this.listQuery.pageNumber - 1
      pageTechnique(this.listQuery).then((res) => {
        this.techniqueDataList = res.data.rows
        this.total = res.data.total
      })
    },
    openCreateDialog() {
      this.dialogVisible = true
      this.dialogStatus = 'create'
    },

    handleSaveData(data) {
      this.getTechniqueDataList()
      if (this.dialogStatus === 'create') {
        // this.search()
      } else {
        const index = this.list.findIndex((v) => v.goodsId === data.goodsId)
        this.list.splice(index, 1, data)
      }
    },
    setStatus(row, index) {
      const pushList = {
        goodsId: row.goodsId,
        techniqueDocumentList: row.techniqueDocumentList,
        techniqueId: row.techniqueId,
        status: index + ''
      }
      this.$confirm('此操作将修改状态, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          updateTechnique(pushList)
            .then((res) => {
              this.$message({
                type: 'success',
                message: '操作成功!'
              })
              this.getTechniqueDataList()
            })
            .finally(() => {
              this.getTechniqueDataList()
            })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消更改'
          })
        })
    },
    deleteTechnique(row) {
      this.$confirm('此操作将永久删除该工艺, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          deleteTechnique({ techniqueId: row.techniqueId })
            .then((res) => {
              this.$message({
                type: 'success',
                message: '删除成功!'
              })
              this.getTechniqueDataList()
            })
            .finally(() => {
              this.getTechniqueDataList()
            })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    openAuditDialog(row) {
      this.auditDialogVisible = true
      this.currentRow = row
    },
    openEditDialog(row) {
      this.currentRow = row
      this.dialogVisible = true
      this.dialogStatus = 'update'
    },
    openDocument(row) {
      openDocument(row)
    },
    copyTechnique(row) {
      copyTechnique({ techniqueId: row.techniqueId })
        .then((res) => {
          this.$message.success('复制成功')
          this.getTechniqueDataList()
        })
        .finally(() => {
          this.getTechniqueDataList()
        })
    }
  }
}
</script>
